<template>
	<view class="play-page" v-if="AccountInfo.miniProgram.envVersion == 'release'">
		<!-- <u-navbar title="播放" :safeAreaInsetTop="true" fixed placeholder bgColor="#353535" titleStyle="color:#FFFFFF">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19" color="#FFFFFF" @click="goBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px" color="#FFFFFF"></u-line>
				<u-icon name="home" size="20" @click="goHome" color="#FFFFFF"></u-icon>
			</view>
		</u-navbar> -->

		<view class="play-content">
			<!-- Tabs切换条 -->
			<view class="tabs-bar">
				<u-tabs
					v-model="activeTab"
					:list="tabs"
					:current="activeTab"
					:scrollable="false"
					:activeStyle="{ color: '#fff' }"
					:inactiveStyle="{ color: '#c3c3c3' }"
					@change="onTabChange"
				></u-tabs>
			</view>

			<!-- 封面或文稿内容 -->
			<swiper :current="activeTab" @change="onTabChange" class="content-container">
				<swiper-item>
					<view class="cover-content">
						<image :src="vuex_audio.currentTrack.coverImgUrl" mode="aspectFill" class="cover-image"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="subtitle-content">
						<text class="subtitle" v-for="(line, index) in subtitles" :key="index">{{ line }}</text>
					</view>
				</swiper-item>
			</swiper>

			<!-- 播放器 -->
			<view class="player-container">
				<view class="player-controls">
					<view class="controls-item">
						<u-icon name="download" color="#ccc" size="30"></u-icon>
						<view class="play-button">下载</view>
					</view>
					<view class="controls-item" @click="changeSpeed">
						<u-icon name="rewind-right" color="#ccc" size="30"></u-icon>
						<view class="play-button">{{ vuex_audio.currentTrack.playbackRate }}x</view>
					</view>
					<!-- <view class="controls-item" @click="toggleLike">
						<u-icon name="thumb-up" color="#ccc" size="30"></u-icon>
						<view class="play-button">{{ vuex_audio.currentTrack.isLiked ? '取消点赞' : '点赞' }}</view>
					</view>
					<view class="controls-item" @click="changePlaytype">
						<u-icon name="star" color="#ccc" size="30"></u-icon>
						<view class="play-button">收藏</view>
					</view> -->
					<button class="u-reset-button controls-item" open-type="share">
						<u-icon name="weixin-fill" color="#ccc" size="30"></u-icon>
						<view class="play-button">分享</view>
					</button>
				</view>
				<view class="audio-container">
					<view class="audio-wrapper">
						<view class="audio-number">
							{{ formatTime(vuex_audio.currentTrack ? vuex_audio.currentTrack.currentTime : 0) }}
						</view>
						<slider
							class="audio-slider"
							activeColor="#169af3"
							block-size="16"
							:value="vuex_audio.currentTrack ? vuex_audio.currentTrack.currentTime : 0"
							:max="vuex_audio.currentTrack.duration ? vuex_audio.currentTrack.duration : 0"
							@changing="handleDrop"
							@change="handleDropEnd"
						></slider>
						<view class="audio-number">
							{{ formatTime(vuex_audio.currentTrack.duration ? vuex_audio.currentTrack.duration : 0) }}
						</view>
					</view>

					<view class="audio-controls">
						<view class="audio-controls-item" @click="handleShowPupop(1)">
							<u-icon name="list" size="30" color="#fff"></u-icon>
						</view>
						<view class="audio-controls-item">
							<u-icon name="rewind-left" size="50" color="#fff" @click="playPrevious()"></u-icon>
							<u-icon :name="vuex_audio_status.isPlaying ? 'pause-circle' : 'play-circle'" color="#fff" size="80" @click="togglePlay"></u-icon>
							<u-icon name="rewind-right" size="50" color="#fff" @click="playNext()"></u-icon>
						</view>
						<view class="audio-controls-item" @click="handleShowPupop(2)">
							<u-icon name="clock" size="30" color="#fff"></u-icon>
							<text>{{ remainingTime }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showpopup" mode="bottom" round="10" :closeOnClickOverlay="true" @close="closePopup()">
			<!-- 音频列表 -->
			<view class="audio-list-popup" v-if="popupType == 1">
				<view class="audio-list-title">
					<u-tabs :list="tabsPupop" :current="playTab" @click="handlePlayTab"></u-tabs>
					<view class="close_icon" @click="closePopup()">
						<u-icon name="close" size="20"></u-icon>
					</view>
				</view>
				<block v-if="playTab == 0">
					<view class="audio-list-order">
						<view class="order-item u-line-1" style="max-width: 70%">
							<view>来源：{{ vuex_audio.currentTrack.album }} | {{ vuex_audio.currentTrack.author }}</view>
						</view>
						<view class="order-item" @click="handlePlayType()">
							<block v-if="vuex_audio_status.playType == 2">
								<image src="@/static/img/audio-order_list.svg"></image>
								<view>顺序播放</view>
							</block>
							<block v-if="vuex_audio_status.playType == 1">
								<image src="@/static/img/audio-order_one.svg"></image>
								<view>单曲循环</view>
							</block>
						</view>
					</view>
					<view class="audio-list-container">
						<view class="audio-list-item" v-for="(item, index) in vuex_audio.playlist" :key="index">
							<view class="audio-list-item-content" @click="selectAudio(item)">
								<view class="audio-list-item-title" :class="item.mp3file_id == vuex_audio.currentTrack.mp3file_id ? 'active' : ''">
									{{ `${item.title} ` }}
								</view>
								<view class="audio-list-item-info">
									<view class="audio-list-item-info-item">
										<view class="audio-list-item-info-item-icon">
											<u-icon name="clock" size="14"></u-icon>
										</view>
										<view class="audio-list-item-info-item-text">{{ formatTime(item.duration) }}</view>
										<view class="" style="color: orange">
											<text v-if="item.isover == 0 && item.mp3file_id == vuex_audio.currentTrack.mp3file_id">
												已播放{{
													Math.ceil(
														vuex_audio.currentTrack.duration
															? (vuex_audio.currentTrack.currentTime / vuex_audio.currentTrack.duration) * 100
															: 0
													)
												}}%
											</text>
											<text v-else-if="item.isover == 1">已完结</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="playTab == 1">
					<view class="audio-list-container">
						<view class="audio-list-item" v-for="(item, index) in vuex_audio.audioList" :key="index">
							<view class="audio-list-item-bar">
								<view class="image-wrapper">
									<image :src="item.coverImgUrl" mode="aspectFill" />
								</view>
								<view class="audio-list-item-content" @click="selectAudio(item)">
									<view class="audio-list-item-title u-line-1" :class="item.id == vuex_audio.currentTrack.id ? 'active' : ''">
										{{ item.title }}
									</view>
									<view class="audio-list-item-title u-line-1">
										{{ item.album }}
									</view>
									<view class="audio-list-item-info">
										<view class="audio-list-item-info-item">
											<view class="audio-list-item-info-item-icon">
												<u-icon name="clock" size="14"></u-icon>
											</view>
											<view class="audio-list-item-info-item-text">{{ formatTime(item.duration) }}</view>
											<view :class="item.mp3file_id == vuex_audio.currentTrack.mp3file_id ? 'active' : ''">
												<text v-if="item.isover == 0">
													已播放{{
														Math.ceil(
															item.mp3file_id == vuex_audio.currentTrack.mp3file_id
																? (vuex_audio.currentTrack.currentTime / vuex_audio.currentTrack.duration) * 100
																: (item.currentTime / item.duration) * 100
														)
													}}%
												</text>
												<text v-else-if="item.isover == 1">已完结</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="audio-list-item-opbar" @click.top="handleDeletePlayList(item)">
								<u-icon name="close-circle" size="20"></u-icon>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 定时器 -->
			<view class="clock-popup" v-if="popupType == 2">
				<view class="popup-header">
					定时
					<view class="close_icon" @click="closePopup()">
						<u-icon name="close" size="20"></u-icon>
					</view>
				</view>
				<view class="popup-content">
					<view class="section-title">
						<view v-if="!vuex_audio.stopType">设置定时关闭</view>
						<block v-else>
							<view v-if="!vuex_audio.stopStatus">
								上次定时{{ vuex_audio.stopType == 'time' ? `${vuex_audio.stopValue}分钟` : `播完${vuex_audio.stopValue}集后关闭` }}
							</view>
							<view v-else-if="vuex_audio.stopStatus">
								{{ vuex_audio.stopType == 'time' ? `${remainingTime}后停止` : `播完${vuex_audio.stopValue}集后停止` }}
							</view>
							<u-switch @change="handleSwitchTimer()" :value="vuex_audio.stopStatus" activeColor="#f56c6c"></u-switch>
						</block>
					</view>
					<block v-for="(item, index) in clockList" :key="index">
						<block v-if="item.type == 'time'">
							<view class="section-subtitle">
								<view>按时间</view>
							</view>
							<view class="timer-options">
								<view
									v-for="(tag, tagIndex) in item.list"
									:key="tagIndex"
									@click="handleSetTimer(item.type, tag.minute)"
									:class="vuex_audio.stopStatus && tag.minute == vuex_audio.stopValue ? 'active' : ''"
								>
									{{ tag.text }}
								</view>
							</view>
						</block>
						<block v-else-if="item.type == 'jishu'">
							<view class="section-subtitle">
								<view>按集数</view>
							</view>
							<view class="jishu-options">
								<view
									v-for="(tag, tagIndex) in item.list"
									:key="tagIndex"
									@click="handleSetTimer(item.type, tag.num)"
									:class="vuex_audio.stopStatus && tag.num == vuex_audio.stopValue ? 'active' : ''"
								>
									{{ tag.text }}
								</view>
							</view>
						</block>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
	<view class="play-page" v-else>
		<view style="width: 400rpx; margin: 200rpx auto; border-radius: 50%">
			<image
				style="width: 100%"
				src="https://wx.qlogo.cn/mmhead/5K48YNcpF3aunuqWwOEaJWYCkls0kIoHiaDhVXvT7ticSDwr7IeX3PiaUg7BHZicLe1qQ4qSGSvlQIA/0"
				mode="aspectFill"
				class="cover-image"
			></image>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import uIcon from '../../uni_modules/uview-ui/components/u-icon/u-icon.vue';
import URadio from '../../uni_modules/uview-ui/components/u-radio/u-radio.vue';
export default {
	components: { uIcon, URadio },
	data() {
		return {
			activeTab: 0, // 当前选中的Tab索引
			tabs: [{ name: '封面' }, { name: '文稿' }],
			tabsPupop: [{ name: '播放列表' }, { name: '待播列表' }],
			audioInnerAudioContext: null, // 音频播放器
			audioList: [], // 音频列表
			playList: [],
			playAudio: {
				current: 0
			},
			showpopup: false,
			popupType: 1,
			clockList: [
				{
					type: 'time',
					list: [
						{
							minute: 15,
							text: '15分'
						},
						{
							minute: 30,
							text: '30分'
						},
						{
							minute: 60,
							text: '60分'
						},
						{
							minute: 90,
							text: '90分'
						}
					]
				},
				{
					type: 'jishu',
					list: [
						{
							num: 1,
							text: '播完本集'
						},
						{
							num: 2,
							text: '播完两集'
						},
						{
							num: 3,
							text: '播完三集'
						},
						{
							num: 5,
							text: '播完五集'
						}
					]
				}
			],
			remainingTime: '',
			timerInterval: null,
			playType: 1, //1单曲循环2列表播放
			playTab: 1,
			AccountInfo: {}
		};
	},
	onLoad(option) {
		if (option.mp3file_id) {
			this.playAudio.mp3file_id = option.mp3file_id;
		}
		let AccountInfo = wx.getAccountInfoSync();
		this.AccountInfo = AccountInfo;
		if (AccountInfo.miniProgram.envVersion !== 'release') {
		} else {
			// 获取音频信息
			this.getAudioPlayList();
		}
		// this.getHistroyList();
	},
	onShow() {
		this.startTimer();
	},

	onHide() {
		this.clearTimer();
	},
	onUnload() {
		this.clearTimer();
	},

	methods: {
		...mapActions(['togglePlay', 'setCurrentTrack', 'playNext', 'playPrevious', 'setRate', 'seeked', 'setAudioTimer', 'clearAudioTimer']),
		/**
		 * 获取信息
		 */
		getAudioPlayList() {
			let PostData = {
				ac: 'getplaylist'
			};
			uni.$u.http
				.post('', PostData)
				.then((res) => {
					console.log('获取到的播放列表数据:', res);
					if (res && res.list && Array.isArray(res.list)) {
						let audioList = res.list.map((item) => ({
							books_id: item.books_id,
							id: item.id,
							mp3file_id: item.mp3file_id,
							title: item.title,
							author: item.author,
							album: item.album,
							singer: item.singer,
							coverImgUrl: item.cover_url,
							src: item.url,
							subtitles: [],
							isover: item.isover,
							part: item.part,
							currentTime: item.play_position,
							duration: item.duration,
							playbackRate: 1, // 默认播放倍速
							audioProgress: 0 // 视频进度
						}));

						this.audioList = audioList;
						console.log('处理后的音频播放列表:', this.audioList);

						let playAudio = null;
						audioList.forEach((item) => {
							if (item.mp3file_id == this.playAudio.mp3file_id) {
								playAudio = item;
							}
						});

						if (!playAudio) {
							playAudio = this.audioList[0];
						}
						this.setCurrentTrack(playAudio);
						this.getPlayListByBookId(playAudio);
						this.addHistoryList();
						this.$u.vuex('vuex_audio.audioList', this.audioList);
						// this.$u.vuex('vuex_audio.playlist', this.audioList);
					} else {
						console.error('获取播放列表失败或列表为空');
					}
				})
				.catch((error) => {
					console.error('获取播放列表出错:', error);
				});
		},

		getPlayListByBookId(playAudio) {
			let PostData = {
				ac: 'getdetail',
				id: playAudio.books_id
			};
			let that = this;
			uni.$u.http.post('', PostData).then((res) => {
				console.log(res);
				let episodeList = res.list.map((item) => {
					return {
						books_id: item.books_id,
						id: playAudio.id,
						mp3file_id: item.id,
						title: item.title,
						author: res.data.author,
						album: item.album,
						singer: item.singer,
						coverImgUrl: res.data.cover_url,
						src: item.url,
						subtitles: [],
						isover: 0,
						part: item.part,
						currentTime: 0,
						duration: item.duration,
						playbackRate: 1, // 默认播放倍速
						audioProgress: 0 // 视频进度
					};
				});

				that.$u.vuex('vuex_audio.playlist', episodeList);
			});
		},
		getHistroyList() {
			let PostData = {
				ac: 'gethistory',
				page: 1
			};
			uni.$u.http.post('', PostData).then((res) => {
				console.log('获取播放历史', res);
			});
		},
		//增加播放历史
		addHistoryList() {
			let PostData = {
				ac: 'addhistory',
				books_id: this.vuex_audio.currentTrack.books_id,
				mp3file_id: this.vuex_audio.currentTrack.mp3file_id,
				part: this.vuex_audio.currentTrack.part,
				play_position: this.vuex_audio.currentTrack.currentTime,
				play_duration: this.vuex_audio.currentTrack.duration,
				is_finished: 0
			};
			uni.$u.http.post('', PostData).then((res) => {
				console.log('增加播放历史', res);
			});
		},
		/**
		 * 非音频操作方法
		 */
		goBack() {
			uni.navigateBack();
		},
		goHome() {
			uni.switchTab({ url: '/pages/index/index' });
		},
		//tab切换
		onTabChange(item) {
			console.log(item);
			if (item.type === 'change') {
				this.activeTab = item.detail.current;
			} else {
				this.activeTab = item.index;
			}
		},
		// 获取音频结束倒计时
		getStopTime() {
			if (this.vuex_audio.stopStatus) {
				if (this.vuex_audio.stopType == 'time') {
					let stopTime = this.vuex_audio.stopByTime.stopTime;
					if (stopTime) {
						// 计算剩余时间
						let currentTime = new Date().getTime();
						let remainingTime = stopTime - currentTime;

						if (remainingTime > 0) {
							// 将剩余时间转换为分钟和秒
							let minutes = Math.floor(remainingTime / 60000);
							let seconds = Math.floor((remainingTime % 60000) / 1000);

							// 格式化输出
							return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
						} else {
							// 如果倒计时已结束
							return '';
						}
					}
				} else if (this.vuex_audio.stopType == 'jishu') {
					return `剩余${this.vuex_audio.stopValue - this.vuex_audio.stopByJishu.playedNum}集`;
				}
			}
			// 如果没有设置停止时间
			return '';
		},

		// 开始倒计时
		startTimer() {
			this.clearTimer(); // 先清除可能存在的定时器
			this.updateRemainingTime(); // 立即更新一次
			this.timerInterval = setInterval(() => {
				this.updateRemainingTime();
			}, 1000); // 每秒更新一次
		},

		// 清除定时器
		clearTimer() {
			if (this.timerInterval) {
				clearInterval(this.timerInterval);
				this.timerInterval = null;
			}
		},
		// 更新倒计时显示
		updateRemainingTime() {
			this.remainingTime = this.getStopTime();
		},

		//点击喜欢
		toggleLike() {},
		//下载音频
		download() {},
		//关闭弹窗
		closePopup() {
			this.showpopup = false;
		},
		//打开弹窗 type==1为列表弹窗 type==2为定时操作弹窗
		handleShowPupop(type) {
			this.popupType = type;
			this.showpopup = true;
		},
		//时间格式化
		formatTime(seconds) {
			const min = Math.floor(seconds / 60);
			const sec = Math.floor(seconds % 60);
			return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
		},
		handlePlayType() {
			if (this.vuex_audio_status.playType == 1) {
				this.$u.vuex('vuex_audio_status.playType', 2);
			} else if (this.vuex_audio_status.playType == 2) {
				this.$u.vuex('vuex_audio_status.playType', 1);
			}
		},
		handlePlayTab(item) {
			this.playTab = item.index;
		},
		async handleSetTimer(type, val) {
			await this.clearAudioTimer();
			console.log('handleSetTimer', type, val);
			if (type == 'time') {
				//按时间设置定时器
				this.setAudioTimer(val);
			} else if (type == 'jishu') {
				//按集数设置定时器
				this.$u.vuex('vuex_audio.stopType', type);
				this.$u.vuex('vuex_audio.stopValue', val);
				this.$u.vuex('vuex_audio.stopStatus', true);
				this.$u.vuex('vuex_audio.stopByJishu.playedNum', 0);
			}
		},
		handleSwitchTimer() {
			if (this.vuex_audio.stopStatus) {
				this.clearAudioTimer();
			} else {
				this.handleSetTimer(this.vuex_audio.stopType, this.vuex_audio.stopValue);
			}
		},
		handleDeletePlayList(item) {
			let that = this;
			if (item.mp3file_id == that.vuex_audio.currentTrack.mp3file_id) {
				uni.showToast({
					title: '不能删除正在播放的音频',
					icon: 'none'
				});
				return;
			}
			uni.showModal({
				title: '操作提示',
				content: '确定要删除吗？',
				success(res) {
					if (res.confirm) {
						let PostData = {
							ac: 'delplaylist',
							id: item.id
						};
						uni.$u.http.post('', PostData).then((res) => {
							let audioList = that.vuex_audio.audioList.filter((i) => i.mp3file_id !== item.mp3file_id);
							that.$u.vuex('vuex_audio.audioList', audioList);
							uni.showToast({
								title: '已从播放列表中移除',
								icon: 'none'
							});
						});
					}
				}
			});
		},
		/**
		 * 音频相关操作
		 */
		handleDrop(e) {
			//拖拽进度条
			this.$u.vuex('vuex_audio_status.isSeeking', true);
		},
		handleDropEnd(e) {
			this.seeked(e.detail.value);
		},
		changeSpeed() {
			//播放速度改变
			let updateRate = 1;
			if (this.vuex_audio.currentTrack.playbackRate === 1) {
				updateRate = 1.5;
			} else if (this.vuex_audio.currentTrack.playbackRate === 1.5) {
				updateRate = 2;
			} else {
				updateRate = 1;
			}
			this.setRate(updateRate);
		},
		changePlaytype() {
			//播放结束循环方式改变
			this.$u.vuex('vuex_audio_status.playType', this.vuex_audio_status.playType == 1 ? 2 : 1);
		},
		selectAudio(item) {
			//选择弹窗列表内的音频并切换
			let playAudio = item;
			this.setCurrentTrack(playAudio);
			this.getPlayListByBookId(playAudio);
			this.closePopup();
		},
		selectClock(item) {
			//选择定时操作时间
			this.setTimeer(item.minute);
			this.closePopup();
		}
	}
};
</script>

<style scoped lang="scss">
.u-nav-slot {
	display: flex;
	align-items: center;
}
.play-page {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #353535;
	min-height: 100vh;
	color: #ccc;
}
.play-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	.tabs-bar {
		margin-top: 10px;
		margin: 0 auto;
	}

	.content-container {
		height: 600rpx;
		.cover-content {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20px;

			.cover-image {
				width: 80%;
				border-radius: 10px;
			}
		}

		.subtitle-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
			padding: 0 10px;
			.subtitle {
				margin-bottom: 10px;
			}
		}
	}

	.player-container {
		margin-top: 20px;
		padding: 0 20px;

		.player-controls {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10px;
			.controls-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 10px;
				font-size: 12px;
				.play-button {
					margin-top: 5px;
				}
			}
		}

		.audio-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
			gap: 20px;
			.audio-progress-container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10px;
				width: 100%;
				gap: 10px;
				.audio-progress-item {
					font-size: 12px;
					img {
						width: 40px;
					}
				}
				.audio-progress {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;
					.audio-progress-bar {
						width: 100%;
						height: 10px;
						background-color: #ccc;
						border-radius: 10px;
					}
					.audio-progress-text-container {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						margin-top: 10px;
						.audio-progress-text {
							font-size: 12px;
						}
					}
				}
				// 可选：添加进度条滑块样式
				.audio-progress-bar /deep/ .u-line-progress__background {
					transition: none; // 移除过渡动画使滑动更流畅
				}
			}

			.audio-wrapper {
				display: flex;
				align-items: center;
				width: 100%;
				.audio-number {
					width: 120upx;
					font-size: 24upx;
					line-height: 1;
					color: #c3c3c3;
					text-align: center;
				}

				.audio-slider {
					flex: 1;
					margin: 0;
				}
			}

			.audio-controls {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10px;
				width: 100%;
				.audio-controls-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100rpx;
					font-size: 12px;
				}
				.audio-controls-item:nth-child(2) {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;
					justify-content: space-around;
					gap: 10px;
				}
			}
		}
	}
}

.audio-list-popup {
	//底部安全距离
	padding-top: 20rpx;
	.audio-list-title {
		position: relative;
		.close_icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 28rpx;
			color: #ccc;
			cursor: pointer;
		}
	}
	.audio-list-order {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		gap: 10px;
		font-size: 24rpx;
		color: #707070;
		padding: 0 30rpx;
		.order-item {
			display: flex;
			align-items: center;
			gap: 10rpx;
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.audio-list-container {
		overflow: auto;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx 40rpx;
		max-height: 600rpx;
		.audio-list-item {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			.audio-list-item-bar {
				display: flex;
				align-items: center;
				gap: 10rpx;
				.image-wrapper {
					width: 120rpx;
					height: 120rpx;
					margin-right: 30rpx;
					flex-shrink: 0;
					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
			.audio-list-item-content {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				flex: 1;
				.audio-list-item-title {
					font-size: 28rpx;
					font-weight: 600;
					color: black;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					&.active {
						color: orangered;
					}
				}
				.audio-list-item-info {
					display: flex;
					align-items: center;
					gap: 10rpx;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #707070;
					font-size: 20rpx;
				}
				.audio-list-item-info-item {
					display: flex;
					align-items: center;
					gap: 10rpx;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #707070;
					font-size: 24rpx;
					.active {
						color: orange;
					}
				}
			}
		}
	}
	.audio-list-close {
		height: 40px;
		width: 80%;
		border-radius: 5px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		background-color: teal;
		color: white;
		margin-top: 20rpx;
	}
}

.clock-popup {
	background-color: #f7f7f7;
	.popup-header {
		padding: 30rpx 30rpx 0;
		position: relative;
		color: #000000;
		.close_icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 28rpx;
			color: #ccc;
			cursor: pointer;
		}
	}
}
.popup-content {
	border-radius: 10rpx;
	background-color: #fff;
	padding: 20rpx;
	color: #000000;
	margin: 30rpx;
	.section-title {
		font-size: 32rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.section-subtitle {
		padding: 20rpx 0;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.right {
			display: flex;
			align-items: center;
			gap: 5rpx;
			color: #707070;
			font-size: 28rpx;
		}
	}
	.timer-options {
		padding: 20rpx 0;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 1px solid #bfbfbf;
			&.active {
				border-color: orangered;
				color: orangered;
			}
		}
	}
	.jishu-options {
		padding: 20rpx 0;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			height: 60rpx;
			justify-content: center;
			border-radius: 40rpx;
			border: #bfbfbf 1px solid;
			&.active {
				border-color: orangered;
				color: orangered;
			}
		}
	}
}
u-button {
	margin: 0 10px;
}
</style>
